<template>
    <div class="content_container">
        <div class="left_container management">
            <div class="title_management">
                <h2>操作记录</h2>
            </div>
            <div class="content_management">

                <div class="select_management">
                    <div class="title">操作类型：</div>
                    <div class="content">
                        <el-select v-model="queryParams.operateType" placeholder="请选择操作类型" clearable
                            @change="getList(queryParams)">
                            <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="title">操作日期：</div>
                    <div class="content">
                        <el-date-picker v-model="queryParams.searchTimes" type="daterange" align="right" unlink-panels
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd" @change="getList(queryParams)">
                        </el-date-picker>
                    </div>
                </div>
                <!-- table -->
                <div class="table_management">
                    <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="getRowClass"
                        :max-height="maxHeight" v-loading="loading">
                        <el-table-column label="操作日期" prop="operateTime" align="center">
                        </el-table-column>
                        <el-table-column label="操作人" prop="userId" align="center">
                        </el-table-column>
                        <el-table-column label="操作类型" prop="operateType" align="center">
                        </el-table-column>
                        <el-table-column label="操作内容" min-width="200px">
                            <template slot-scope="scope">
                                <div v-html="scope.row.operateContent"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页器 -->
                    <div class="createDate">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="queryParams.pageNo" :page-sizes="[10, 20, 30, 40]"
                            :page-size="queryParams.pageSize" layout="->,total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import mixins from './mixins';
import { getOperateLogListRequest, getOperateTypeListRequest } from '@/api/management'
export default {
    name: 'GenecloudUiMenu',
    mixins: [mixins],
    data() {
        return {
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                searchTimes: [],
                operateType: ''
            },
            options: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: [],
            tableData: [],
            total: 0
        };
    },
    async created() {
        this.getList(this.queryParams)
        this.getOperateType()
    },
    mounted() {

    },
    methods: {
        async getOperateType() {
            const res = await getOperateTypeListRequest()
            if (res.code !== 200) return this.$message.error(res.message)
            this.options = res.data.reduce((pre, item) => {
                pre.push({
                    label: item.name,
                    value: item.code
                })
                return pre
            }, [])
        },
        async getList(queryParams) {
            const res = await getOperateLogListRequest(queryParams)
            if (res.code !== 200) return this.$message.error(res.code)
            this.tableData = res.data.list || []
            this.loading = false
            this.total = res.data.total
        },
        //修改页码
        handleCurrentChange(val) {
            this.queryParams.pageNo = val
            this.getList(this.queryParams)
        },
        //修改页数
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList(this.queryParams)
        },
    },
};
</script>

<style lang="scss" scoped>
.title_management{
    margin-left: 30px;
}
.content_management {
    margin: 0 15px;

    .select_management {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        line-height: 50px;
        margin-bottom: 15px;

        ::v-deep .el-input__inner {
            height: 35px;
            line-height: 35px;
            border-radius: 4px;
        }

        .title {
            margin-left: 10px;
        }

    }

    .table_management {
        border: 1px solid #d3ddeb;
        border-radius: 6px;

        .createDate {
            padding-top: 15px;
        }
    }
}
</style>